<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D旋转木马</title>
    <style>
	body {
	   background-color:#01A3D2;
	}
        img {
            max-width:350px;
            max-height:250px;
            position:absolute;
            left:40%;
            top:200px;
            /*-webkit-animation-duration: 10s;*/
            /*-webkit-animation-iteration-count: 10;*/
            /*-webkit-animation-timing-function: linear;*/
            animation-duration: 10s;
            animation-iteration-count: 10;
            animation-timing-function: linear;
        }
        .img1 {
            transform: rotateY(0deg) translateZ(600px);
            /*-webkit-animation-name: img-1;*/
            animation-name: img-1;


        }
        @keyframes img-1 {
            0%{transform: rotateY(0deg) translateZ(600px);}
            11%{transform: rotateY(40deg) translateZ(600px);}
            22%{transform: rotateY(80deg) translateZ(600px);}
            33%{transform: rotateY(120deg) translateZ(600px);}
            44%{transform: rotateY(160deg) translateZ(600px);}
            55%{transform: rotateY(200deg) translateZ(600px);}
            66%{transform: rotateY(240deg) translateZ(600px);}
            77%{transform: rotateY(280deg) translateZ(600px);}
            88%{transform: rotateY(320deg) translateZ(600px);}
            100%{transform: rotateY(360deg) translateZ(600px);}
        }
        .img2 {
            transform: rotateY(40deg) translateZ(600px);
            animation-name: img-2;
        }
        @keyframes img-2 {
            0%{transform: rotateY(40deg) translateZ(600px);}
            11%{transform: rotateY(80deg) translateZ(600px);}
            22%{transform: rotateY(120deg) translateZ(600px);}
            33%{transform: rotateY(160deg) translateZ(600px);}
            44%{transform: rotateY(200deg) translateZ(600px);}
            55%{transform: rotateY(240deg) translateZ(600px);}
            66%{transform: rotateY(280deg) translateZ(600px);}
            77%{transform: rotateY(320deg) translateZ(600px);}
            88%{transform: rotateY(360deg) translateZ(600px);}
            100%{transform: rotateY(40deg) translateZ(600px);}
        }
        .img3 {
            transform: rotateY(80deg) translateZ(600px);
           animation-name: img-3;
        }
        @keyframes img-3 {
            0%{transform: rotateY(80deg) translateZ(600px);}
            11%{transform: rotateY(120deg) translateZ(600px);}
            22%{transform: rotateY(160deg) translateZ(600px);}
            33%{transform: rotateY(200deg) translateZ(600px);}
            44%{transform: rotateY(240deg) translateZ(600px);}
            55%{transform: rotateY(280deg) translateZ(600px);}
            66%{transform: rotateY(320deg) translateZ(600px);}
            77%{transform: rotateY(360deg) translateZ(600px);}
            88%{transform: rotateY(40deg) translateZ(600px);}
            100%{transform: rotateY(80deg) translateZ(600px);}
        }
        .img4 {
            transform: rotateY(120deg) translateZ(600px);
            animation-name: img-4;
        }
        @keyframes img-4 {
            0%{transform: rotateY(120deg) translateZ(600px);}
            11%{transform: rotateY(160deg) translateZ(600px);}
            22%{transform: rotateY(200deg) translateZ(600px);}
            33%{transform: rotateY(240deg) translateZ(600px);}
            44%{transform: rotateY(280deg) translateZ(600px);}
            55%{transform: rotateY(320deg) translateZ(600px);}
            66%{transform: rotateY(360deg) translateZ(600px);}
            77%{transform: rotateY(40deg) translateZ(600px);}
            88%{transform: rotateY(80deg) translateZ(600px);}
            100%{transform: rotateY(120deg) translateZ(600px);}
        }
        .img5 {
            transform: rotateY(160deg) translateZ(600px);
            animation-name: img-5;
        }
        @keyframes img-5 {
            0%{transform: rotateY(160deg) translateZ(600px);}
            11%{transform: rotateY(200deg) translateZ(600px);}
            22%{transform: rotateY(240deg) translateZ(600px);}
            33%{transform: rotateY(280deg) translateZ(600px);}
            44%{transform: rotateY(320deg) translateZ(600px);}
            55%{transform: rotateY(360deg) translateZ(600px);}
            66%{transform: rotateY(40deg) translateZ(600px);}
            77%{transform: rotateY(80deg) translateZ(600px);}
            88%{transform: rotateY(120deg) translateZ(600px);}
            100%{transform: rotateY(160deg) translateZ(600px);}
        }
        .img6 {
            transform: rotateY(200deg) translateZ(600px);
            animation-name: img-6;
        }
        @keyframes img-6 {
            0%{transform: rotateY(200deg) translateZ(600px);}
            11%{transform: rotateY(240deg) translateZ(600px);}
            22%{transform: rotateY(280deg) translateZ(600px);}
            33%{transform: rotateY(320deg) translateZ(600px);}
            44%{transform: rotateY(360deg) translateZ(600px);}
            55%{transform: rotateY(40deg) translateZ(600px);}
            66%{transform: rotateY(80deg) translateZ(600px);}
            77%{transform: rotateY(120deg) translateZ(600px);}
            88%{transform: rotateY(160deg) translateZ(600px);}
            100%{transform: rotateY(200deg) translateZ(600px);}
        }
        .img7 {
            transform: rotateY(240deg) translateZ(600px);
            /*-webkit-animation-name: img-7;*/
           animation-name: img-7;
        }
        @keyframes img-7 {
            0%{transform: rotateY(240deg) translateZ(600px);}
            11%{transform: rotateY(280deg) translateZ(600px);}
            22%{transform: rotateY(320deg) translateZ(600px);}
            33%{transform: rotateY(360deg) translateZ(600px);}
            44%{transform: rotateY(40deg) translateZ(600px);}
            55%{transform: rotateY(80deg) translateZ(600px);}
            66%{transform: rotateY(120deg) translateZ(600px);}
            77%{transform: rotateY(160deg) translateZ(600px);}
            88%{transform: rotateY(200deg) translateZ(600px);}
            100%{transform: rotateY(240deg) translateZ(600px);}
        }
        .img8 {
            transform: rotateY(280deg) translateZ(600px);
            /*-webkit-animation-name: img-8;*/
            animation-name: img-8;
        }
        @keyframes img-8 {
            0%{transform: rotateY(280deg) translateZ(600px);}
            11%{transform: rotateY(320deg) translateZ(600px);}
            22%{transform: rotateY(360deg) translateZ(600px);}
            33%{transform: rotateY(40deg) translateZ(600px);}
            44%{transform: rotateY(80deg) translateZ(600px);}
            55%{transform: rotateY(120deg) translateZ(600px);}
            66%{transform: rotateY(160deg) translateZ(600px);}
            77%{transform: rotateY(200deg) translateZ(600px);}
            88%{transform: rotateY(240deg) translateZ(600px);}
            100%{transform: rotateY(280deg) translateZ(600px);}
        }
        .img9 {
            transform: rotateY(320deg) translateZ(600px);
            /*-webkit-animation-name: img-9;*/
            animation-name: img-9;
        }
        @keyframes img-9 {
            0%{transform: rotateY(320deg) translateZ(600px);}
            11%{transform: rotateY(360deg) translateZ(600px);}
            22%{transform: rotateY(40deg) translateZ(600px);}
            33%{transform: rotateY(80deg) translateZ(600px);}
            44%{transform: rotateY(120deg) translateZ(600px);}
            55%{transform: rotateY(160deg) translateZ(600px);}
            66%{transform: rotateY(200deg) translateZ(600px);}
            77%{transform: rotateY(240deg) translateZ(600px);}
            88%{transform: rotateY(280deg) translateZ(600px);}
            100%{transform: rotateY(320deg) translateZ(600px);}
        }
        body {
            transform-style: preserve-3D;
            perspective:4000px;
            perspective-origin: 75% 25%;
        }
        div {
            position:absolute;
            text-align: center;
            color:white;
            left:40%;
        }
    </style>
</head>
<body>
<img src="img/3DCarousel_images/1.jpg" alt="" class="img1"/>
<img src="img/3DCarousel_images/2.jpg" alt="" class="img2"/>
<img src="img/3DCarousel_images/3.jpg" alt="" class="img3"/>
<img src="img/3DCarousel_images/4.jpg" alt="" class="img4"/>
<img src="img/3DCarousel_images/5.jpg" alt="" class="img5"/>
<img src="img/3DCarousel_images/6.jpg" alt="" class="img6"/>
<img src="img/3DCarousel_images/7.jpg" alt="" class="img7"/>
<img src="img/3DCarousel_images/8.jpg" alt="" class="img8"/>
<img src="img/3DCarousel_images/9.jpg" alt="" class="img9"/>
<div>
    <h3>3D旋转木马</h3>
    <p>
        用到的知识点是3D动画的定义和引用
    </p>
</div>
</body>
</html>